<template>
    <div class="Aside">
<!--        <img src="../../assets/img/asider_img/logo.png" alt="" class="logo">-->
        <el-row class="tac">
            <el-col :span="24">
                <el-menu
                        :default-active="defaultActive"
                        router
                        class="el-menu-vertical-demo"
                        @select="handleSelect"
                        >
                    <el-menu-item index="Directory">
                        <div>
                            <i class="el-icon-notebook-2"></i>
                            <span slot="title" >资源目录中心</span>

                        </div>
                        <i class="el-icon-caret-right"></i>

                    </el-menu-item>

                    <el-menu-item index="Application">
                        <div>
                            <i class="el-icon-news"></i>
                            <span slot="title" >申请中心</span>

                        </div>
                        <i class="el-icon-caret-right"></i>

                    </el-menu-item>

                    <el-menu-item index="History" >
                        <div>
                            <i class="el-icon-timer"></i>
                            <span slot="title" >历史记录</span>

                        </div>
                        <i class="el-icon-caret-right"></i>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                defaultActive:'Directory'
            }
        },
        mounted(){
            this.setCurrentRoute()
        },
        methods: {
            setCurrentRoute () {
                this.defaultActive = this.$route.name //关键   通过他就可以监听到当前路由状态并激活当前菜单
            },
            handleSelect(key) {

                if(key==1){
                    this.$router.push({

                        name:'Directory'
                    })
                }
                if(key==2){
                    this.$router.push({
                        name:'Application'
                    })
                }
                if(key==3){
                    this.$router.push({
                        name:'History'
                    })
                }
                // console.log(key, keyPath);
            },
        }
    }
</script>

<style lang="less">
    .Aside{

        .el-menu-item{
            width: 200px;
            background: #00032a;
            color: white;
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
        .el-menu-item.is-active{
            background: #1ffce5;
            font-weight: 700;
            /*text-align: left;*/
            color: #000000;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Bold;
        }
        .el-menu-item:focus, .el-menu-item:hover{
            background: #1ffce5;
        }
    }
</style>
